<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>上傳課程</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- tag -->
<link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body  class="membernav">
	<div id="page">
		<div class="header FixedTop addPageHeader">
			<a href="#menu" class="headericon"></a>
			<a href="memberCourse?id=${loginMember.memberNO}" class="titleLink">會員上傳中心 - 上傳課程</a>
		</div><!-- header -->
		<div class="content clearfix">
			<div class="addPageLink">
				<div class="container">
					<!-- <div class="prefix_1 suffix_1 grid_10"> -->
					<div class="grid_12">
						<ul class="topnav">
							<li><a href="addCourseCont" class="current">上傳課程</a></li>
							<li><a href="addDesignCont">上傳作品</a></li>
							<li><a href="addWorksheetCont">上傳學習單</a></li>
							<li><a href="addResourceCont">上傳設計資源</a></li>
							<!-- <li><a href="activityList.html">建立活動</a></li> -->					
						</ul>
					</div>
				</div>
			</div>				
			<div class="addPage">
				<div class="container">
					<!-- <div class="prefix_1 suffix_1"> -->
					<div>						
						<form id="sendForm" method="post" action="addCourse" enctype="multipart/form-data">
							<input type="hidden" name="status" id="status" value="1">
							<input type="hidden" id="cid1" name="category1ID" value="${category1[0].id}">
							<input type="hidden" id="cid2" name="category2ID" value="${category2[0].id}">
							<input type="hidden" id="tags" name="tags">
							<div class="grid_3">

								<label><strong>封面圖片:<span id="msg1"></span></strong></label>

								<div class="uploadimgArea">
									<input type="file" name="image" id="image" class="uploadimgfile" value="上傳圖片">
									<div class="uploadimgs">
										<img src="images/uploadimg.png" alt="上傳圖片鈕" id="uploadimg" class="uploadimg">
										<img src="images/reuploadimg.png" alt="重傳圖片鈕" id="reuploadimg" class="reuploadimg" style="display:none;">
										<img src="images/uploadimg.png" alt="上傳的圖片" id="preview" style="display:none;">
									</div>
								</div>
								
							</div><!-- grid_2 -->
							<div class="grid_5">
								<label><strong>類型:</strong></label>
								<ul class="list-screen-condition">
									<li class="screen-condition">
										<a class="cond-down" href="javascript:;">
										<span class="cond-value">${category1[0].name}</span>
										<i></i>
										</a>
										<ul id="c1">
											<c:forEach items="${category1}" var="category1" varStatus="i">
												<li class="list-item">
													<a href="javascript:;" data-id="${category1.id}">${category1.name}</a>
												</li>
											</c:forEach>
										</ul>
									</li>
									<li class="screen-condition">
										<a class="cond-down" href="javascript:;">
										<span class="cond-value" id="c2Name">${category2[0].name}</span>
										<i></i>
										</a>
										<ul id="c2">
											<c:forEach items="${category2}" var="category2" varStatus="i">
												<li class="list-item">
													<a href="javascript:;" data-id="${category2.id}">${category2.name}</a>
												</li>
											</c:forEach>
										</ul>
									</li>
								</ul>
								<label>
									<strong>標題:<span id="msg2"></span></strong>
									<input type="text" class="txt" name="title" placeholder="取個有吸引力的標題" maxlength="30">
								</label>

								<strong class="typeinline">上傳檔案:</strong>
								<label class="typeinline">
									<input type="radio" name="isFile" class="radio" value="1" checked>
									<span>直接上傳</span>
								</label>
								<label class="typeinline">
									<input type="radio" name="isFile" class="radio" value="0">
									<span>載點網址(超過10MB請使用載點網址)</span>
								</label><br/>
								<div class="uploadwrap">
									<input type="file"class="upload" name="file" id="file" size="40" onchange="this.nextElementSibling.value = this.value">
									<input type="text" class="txt upload" id="fileText" size="40" placeholder="點擊上傳檔案">
									<input type="text" class="txt" name="fileUrl" id="fileUrl" placeholder="http://" style="display:none;" maxlength="100">
								</div>
								
								<!-- <input type="text" class="txt" placeholder="http://"> -->
								
								<label>
									<strong>展示連結:</strong>
									<input type="text" class="txt" name="demo" id="demo" placeholder="http://" maxlength="100">
								</label>
							</div><!-- grid_4 -->
							<div class="grid_4">
								<strong>原作者:</strong>
								<label>
									<input type="radio" name="isWriter" class="radio" value="1" checked>
									<span class="authorRadio">本人</span>
								</label>
								<label>
									<input type="radio" name="isWriter" class="radio" value="0">
									<span class="authorRadio">非本人</span>
									<input type="text" class="txt txt_chg1" name="writer" id="writer" placeholder="名稱" style="display:none;" maxlength="10">
									<input type="text" class="txt txt_chg2" name="writerUrl" id="writerUrl" placeholder="原文連結" style="display:none;" maxlength="100">
								</label>
								
								
								<label><strong>標籤:</strong></label>
								<input id="tags_1" type="text" class="tags"/>
									
								<ul class="tag">
									<c:forEach items="${tag}" var="tag" varStatus="i">
										<li><a href="javascript:;"><span>${tag.tag}</span></a></li>
									</c:forEach>
								</ul>

							</div><!-- grid_4 -->
							<!-- article -->
							<div class="grid_12">
								<strong>文章內文:<span id="msg3"></span></strong>
								<textarea class="ckeditor" name="content" id="content"></textarea>
								<ul class="btnGroup">
									<!-- <li><input type="submit" class="btn btn_chg1" value="存成草稿"></li> -->
									<li><input type="button" id="send" class="btn" value="發佈"></li>
									<li><a href="course"><input type="button" class="btn btn_chg2" value="取消"></a></li>
								</ul>
							</div><!-- grid_10 -->
						</form>
					</div><!-- prefix_1 suffix_1 -->
				</div><!-- container -->
			</div><!-- addPage -->
		</div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


	<!-- ckeditor -->
	<script src="ckeditor/ckeditor.js"></script>

	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>

	<script type="text/javascript" src="js/jquery.tagsinput.js"></script>
	<!-- To test using the original jQuery.autocomplete, uncomment the following -->
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>
    <!-- preview image -->
    <script src="js/previewimg.js"></script>
	<script type="text/javascript">
		
		
		$(function() {
			$('nav#menu').mmenu();
			$('.list-screen-condition li').hover(function(){
				var $this = $(this);
				$this.find('ul').show();
				$this.find('.cond-down').addClass('cond-down-hover');
				$this.find('.list-item a').click(function(){
					var condVal = $(this).text();
					$this.find('.cond-value').text(condVal);
					$this.find('.list-item a').removeClass('selected');
					$(this).addClass("selected");
					$this.find('ul').hide();
					$this.find('.cond-down').removeClass('cond-down-hover');
				});
			},function(){
				var $this = $(this);
				$this.find('ul').hide();
				$this.find('.cond-down').removeClass('cond-down-hover');
			});
			
			$('#tags_1').tagsInput({width:'auto'});
			
			
			$('#sendForm').submit(function(){
	            $('textarea.ckeditor').each(function () {
	               var $textarea = $(this);
	               $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
	            });
	        });
			$("#sendForm").validate({
				rules:{
					title:"required",
					content:"required",
					image:{
						required:true,
						extension:"jpg|png|jpeg|gif",
	    				filesize:1048576
					},
					file:{
						filesize:10485760
					}
				},
				messages:{
					title:"請填寫標題",
					content:"請填寫內容",
					image:{
						required:"請選擇圖片",
						extension:"檔案格式錯誤，請選擇圖片格式",
	    				filesize:"圖片大小上限為1MB"
					},
					file:{
						filesize:"超過10MB請使用載點網址"
					}
				},
				errorPlacement: function (error, element) {
	    	    	if(element.attr('name') == "image"){
	    	            $("#msg1").append(error);
	    	    	}
	    	    	else if(element.attr('name') == "title"){
	    	            $("#msg2").append(error);
	    	    	}
	    	    	else if(element.attr('name') == "content"){
	    	            $("#msg3").append(error);
	    	    	}
	    	    	else
	    	    		error.insertBefore(element);
	    	    },
	    	    invalidHandler: function(event, validator) {
	    	    	$("#send").attr("disabled", false);
	    	    },
				ignore: ''
			});
			$("#send").click(function(){
				$("#send").attr("disabled", true);
				var tags = $("#tags_1_tagsinput>.tag").find("span").text();
				var tagsList = tags.split("\u00A0\u00A0");
				$("#tags").val(tagsList);
				$("#status").val(1);
				$("#sendForm").submit();
				
			});
			
			$("#image").change(function(){
				if($(this).val() != ""){
	    			previewImage(this,$("#preview"),"images/uploadimg.png");
	    			$("#reuploadimg").css("display","inline");
	    			$("#preview").css("display","inline");
	    			$("#uploadimg").css("display","none");
				}
				else{
					$("#reuploadimg").css("display","none");
	    			$("#preview").css("display","none");
	    			$("#uploadimg").css("display","inline");
				}
	    	});
			
			
			$('#c1 .list-item a').click(function(){
				$("#cid1").val($(this).attr("data-id"));
				$.ajax({
					url:"getCourseCategory2",
					data:{
						category1ID:$(this).attr("data-id")
					},
					dataType:"json",
					success:function(result){
						getTag(result[0].courseCategory2ID);
						$("#c2").find("li").remove();
						$("#c2Name").text(result[0].name);
						$("#cid2").val(result[0].id);
						for(var i=0; i<result.length; i++){
							$("#c2").append('<li class="list-item"><a href="javascript:;" class="'+(i==0?'selected':'')+'" data-id="'+result[i].id+'">'+result[i].name+'</a></li>');
						}
						
					}
				});
			});
			
			$("#c2").on("click",".list-item a",function(){
				$("#cid2").val($(this).attr("data-id"));
				getTag($(this).attr("data-id"));
			});
			
			$(".tag").on("click","li",function(){
				var tags = $("#tags_1_tagsinput>.tag").find("span").text();
				var tagsList = tags.split("\u00A0\u00A0");
				var flag = true;
				for(var i=0; i<tagsList.length; i++){				
					if(tagsList[i].match($(this).text()) != null)
						flag = false;
				}
				if(flag){
					$("#tags_1_tag").attr("class","");
					$("#tags_1_tag").attr("data-default","輸入標籤新增");
					$("#tags_1_tag").val("輸入標籤新增");
					$("#tags_1").addTag($(this).text(),{focus:true,unique:true});
					$(this).remove();				
				}
				else{
					$("#tags_1_tag").attr("data-default","標籤名稱重複");
					$("#tags_1_tag").val("標籤名稱重複");
					$("#tags_1_tag").attr("class","not_valid");
				}
				
			});
			$("input[name='isFile']").change(function(){
	    		if($(this).val()==1){
	    			$("#file").css("display","inline");
	    			$("#fileText").css("display","inline");
	    			$("#fileUrl").css("display","none");
	    			$("#fileUrl").val("");
	    		}
	    		else if($(this).val()==0){
	    			$("#file").css("display","none");
	    			$("#fileText").css("display","none");
	    			$("#fileUrl").css("display","inline");
	    			$("#file").val("");
	    		}
	    	});
			$("input[name='isWriter']").change(function(){
				if($(this).val()==1){
	    			$("#writer").css("display","none");
	    			$("#writerUrl").css("display","none");
	    			removeWriter();
	    		}
				else{
	    			$("#writer").css("display","inline");
	    			$("#writerUrl").css("display","inline");
	    			addWriter();
				}
			});
		});
	
		
		function getTag(c2){
			$.ajax({
				url:"getCourseTag",
				data:{
					category2ID:c2
				},
				dataType:"json",
				success:function(result){
					$(".tag").find("li").remove();
					for(var i=0; i<result.length; i++){
						$("ul.tag").append('<li><a href="javascript:;"><span>'+result[i].tag+'</span></a></li>');
					}
				}
			});
		}
		
		function addWriter(){
			$("#writer").rules("add",{
				required:true,
				messages:{
					required:"請填寫名稱"
				}
			});
			$("#writerUrl").rules("add",{
				required:true,
				messages:{
					required:"請填寫原文連結"
				}
			});
		}
		
		function removeWriter(){
			$("#writer,#writerUrl").next("label.error").remove();
			$("#writer").rules("remove");
			$("#writerUrl").rules("remove");
			$("#writer,#writerUrl").val("");
		}
	</script>
</body>
</html>